上篇說到將狀態變數記錄在手機端裡，其實不止狀態變數，上次關閉前的頁面也可以被記錄下來。

在<NavigationContainer>標籤有個參數名為onStateChange，每當進行頁面切換之後，React Native會在onStateChange輸出目前的導覽頁面參數，利用此參數就可恢復上次開啟得畫面。

• 首先開啟App.js檔案，並在裡面新增兩個狀態變數，一個用來記錄導覽頁面，一個用來記錄導覽元件的狀態變數完成記錄與否

  const [initialNavigationState, setInitialNavigationState] = React.useState();
  const [isLoadingComplete, setLoadingComplete] = React.useState(false);
  

• 接下來在<NavigationContainer>標籤設定initialState與onStateChange參數

  <NavigationContainer
        initialState={initialNavigationState}
        onStateChange={(state) =>
          AsyncStorage.setItem('PERSISTENCE_KEY', JSON.stringify(state))
        }
  >
        <MainTabNavigator />
  </NavigationContainer>
  

  ＊小提示：我們可以在onStateChange直接儲存導覽頁面的狀態變數是因為React Navigation會在頁面狀態變數設定完畢之後才執行onStateChange指定的函數。
• 之後來設定在第一次渲染畫面之後載入導覽元件的狀態變數

  React.useEffect(() => {
    async function loadResourcesAndDataAsync() {
      try {
        SplashScreen.preventAutoHide();
        const savedStateString = await AsyncStorage.getItem('PERSISTENCE_KEY');
        const state = JSON.parse(savedStateString);
        setInitialNavigationState(state);
      } catch (e) {
        console.warn(e);
      } finally {
        setLoadingComplete(true);
        SplashScreen.hide();
      }
    }
    loadResourcesAndDataAsync();
  }, []);
  if (!isLoadingComplete) {
    return null;
  } else {
    return (
      <NavigationContainer
        initialState={initialNavigationState}
        onStateChange={(state) =>
          AsyncStorage.setItem('PERSISTENCE_KEY', JSON.stringify(state))
        }
      >
        <MainTabNavigator />
      </NavigationContainer>
    );
  }
  

  &小重點：必須在導覽元件的狀態變數設定完畢(isLoadingComplete=true)的情況下才渲染畫面，要不然導覽元件會將初始畫面的內容設定為最新的導覽狀態!